<template>
  <view class="page custom-page">
    <custom-head gradient back title="老师管理">
      <view class="tool" slot="right" >
        <!-- <i class="iconfont icon-fenlei fenlei"></i> -->
      </view>
    </custom-head>
    <view class="search flex a-center">
      <view class="search-input">
        <i class="iconfont icon-sousuo1"></i>
        <input type="search" confirm-type="search" placeholder="请输入学校" v-model="params.name" @confirm="confirm" />
      </view>
      <view class="submit" @click="confirm">搜索</view>
    </view>
    <view class="student">

      <!-- <scroll-view :scroll-y="true" :scroll-top="scrollTop"  @scrolltolower="bottomOut" style="height: 100%;"> -->
        <!-- 删除下拉加载更多 -->
      <scroll-view :scroll-y="true" :scroll-top="scrollTop"  style="height: 100%;">
      
        <u-index-list v-if="indexList.length > 0" :scrollTop="scrollTop" :sticky="false" :index-list="indexList">
          <view v-for="(item, index) in indexList" :key="index">
            <u-index-anchor :index="item" />
            <view class="student-item flex a-center" v-for="(item, index) in teacherList[item]" :key="index" @click="handleJumpEdit(item)">
              <view class="touxiang">
                <image :src="item.avatar" />
              </view>
              <view class="info">
                <view class="title">{{ item.name }} </view>
                <view class="text flex a-center">
                  <span><i class="iconfont icon-shouji"></i> {{ item.phone }}</span>
                </view>
              </view>
            </view>
          </view>
        </u-index-list>

        <view v-else class="noData">暂无数据</view>
      
      </scroll-view>

      <view class="bottom_btn_box">
        <u-button type="primary" shape="circle" @click="toPage('/pages/teacher/addition')">添加老师信息</u-button>
      </view>
      <!-- <u-action-sheet cancelText="取消" :list="list" v-model="show" @click="enterPage"></u-action-sheet> -->
    </view>
  </view>
</template>
<script>
import { toPage } from '../../utils/index.js'
import { getTeacher } from '../../api/modules/teacher'
import { textToPy, pinyinSort } from '../../utils/index'

export default {
  data() {
    return {
      name: '',
      scrollTop: 0,
      // show: false,
      // list: [
      //   {
      //     text: '批量添加老师信息',
      //     path: '/pages/school/batchAddition'
      //   }
      // ],
      indexList: [],
      teacherList: [],
      params: {
        name: ''
      },
      initTeacherList: [],  // 获取接口返回的初始数据
      page_no:1 ,  // 默认加载第一页
      page_size:20 ,  // 每页加载 20条数据
      total: 0, // 一共有多少条数据 
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    }
  },
  onShow() {  // 页面显示就会执行这个函数
    // console.log('老师页面显示')
    this.page_no = 1;
    this._getTeacher({
      page_no: 1,
      page_size: 10000,
      name: this.params.name
    })
  },

  // mounted() {
  //   // this._glbgetTeacher();
  //   this._getTeacher({
  //     page_no: 1,
  //     page_size: 10000,
  //     name: this.params.name
  //   })
  // },

  methods: {
    // bottomOut() {
    //   console.log('上划加载跟多', Math.ceil(this.total / this.page_size))
    //   if (this.page_no < Math.ceil(this.total / this.page_size)) {
    //     this.page_no+=1;
    //     getTeacher({
    //       page_no: this.page_no,
    //       page_size: 20,
    //     }).then((res) => {
    //       console.log('res --', res)
    //       const { code, data } = res || {}
    //       if (code === 200) {
    //         const list = ([] && data.list).map((item) => ({ ...item, pname: textToPy(item.name), avatar: item.avatar ? `${this.static_uri}${item.avatar}` : '' }));
    //         this.initTeacherList.push(...list)
    //         const tempArr = pinyinSort(this.initTeacherList)
    //         this.teacherList = tempArr;
    //         this.indexList = Object.keys(tempArr);
    //       }
    //     })
    //   }
    // },
    handleJumpEdit({id}) {
      console.log('跳转', id)
      this.$u.toast('保存成功')
      uni.navigateTo({
        url: `/pages/teacher/addition?id=${id}`
      })
    },
    toPage,
    enterPage(e) {
      var path = this.list[e].path
      uni.navigateTo({
        url: path
      })
    },

    confirm() {
      this._getTeacher(this.params)
      // this._glbgetTeacher(this.params);
    },
    _glbgetTeacher() {
      console.log('全局获取所有老师', this.glbTeachers)
      
      this.initTeacherList = this.glbTeachers;
      const tempArr = pinyinSort(this.glbTeachers)
      this.teacherList = tempArr
      this.indexList = Object.keys(tempArr)
    },

    _getTeacher(data) {
      getTeacher(data).then((res) => {
        const list = res.data.list.map((item) => ({ ...item, pname: textToPy(item.name), avatar: item.avatar ? `${this.static_uri}${item.avatar}` : '' })).filter(i => i.sid === this.glbId)
        console.log('获取数据 res', list)

        this.initTeacherList = list;
        const tempArr = pinyinSort(list)
        this.teacherList = tempArr
        this.indexList = Object.keys(tempArr)
        this.total = res.data.total;
      })
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop - 114
  }
}
</script>
<style scoped lang="scss">
.student {
  background-color: #fff;
  position: relative;
  padding-bottom: 100rpx;
  margin-top: 114rpx;
  height: calc(100% - 114rpx);
}

.page {
  height: 100vh;
}

.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120rpx;
  width: 100%;
}

.search {
  width: 100%;
  height: 114rpx;
  background-color: #f3f4f5;
  padding: 25rpx 30rpx;
  position: fixed;
  top: calc(44px + var(--status-bar-height));
  z-index: 2;
  left: 0;

  .submit {
    font-size: 24rpx;
    color: #303133;
    padding: 0 30rpx;
    line-height: 64rpx;
  }
}

.search-input {
  flex: 1;
  background-color: #fff;
  height: 64rpx;
  border-radius: 32rpx;
  position: relative;

  input {
    font-size: 24rpx;
    color: #666;
    line-height: 64rpx;
    outline: none;
    background: none;
    height: 64rpx;
    padding-left: 60rpx;
  }

  i {
    position: absolute;
    left: 15rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36rpx;
    color: #8f9399;
  }
}

.studentList {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.student-item {
  width: 100%;
  padding: 20rpx 20rpx;

  .touxiang {
    width: 120rpx !important;
    height: 120rpx !important;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
  }

  .touxiang image {
    width: 100%;
    height: 100%;
  }

  .info {
    flex: 1;

    .title {
      font-size: 32rpx;
      color: #303133;
      margin-bottom: 10rpx;
    }

    .title span {
      font-size: 24rpx;
    }

    .text {
      font-size: 24rpx;
      color: #303133;
    }

    .integral {
      margin-left: 65rpx;
      color: #2979ff;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}

.bottom_btn_box {
  background-color: #fff;
}
</style>
